<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nexus | 创新数字体验</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#00F0FF',
            dark: '#121212',
            'dark-light': '#1E1E2E',
            'gray-custom': '#8A8F98'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif']
          },
        },
      }
    }

    // 自定义方法，由鸿蒙语言中按钮调用，只测试是否调用成功与否
    function test(){
      // 打印日志
      console.info('Ark Web Component');
      // 触发confirm方法，传出数据。
      confirm('XXX奖品')

    }

  </script>
  
  <!-- 自定义样式 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-gradient {
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .bg-grid {
        background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 30px 30px;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .rotate-hover {
        transition: transform 0.5s ease;
      }
      .rotate-hover:hover {
        transform: rotate(5deg) scale(1.05);
      }
    }
  </style>
  
  <!-- 引入字体 -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>

<body class="font-inter bg-dark text-white overflow-x-hidden">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 py-4">
    <div class="container mx-auto px-4 md:px-8">
      <nav class="flex items-center justify-between">
        <a href="#" class="text-2xl font-bold flex items-center gap-2">
          <span class="text-secondary">N</span>exus
        </a>
        
        <!-- 桌面导航 -->
        <div class="hidden md:flex items-center space-x-8">
          <a href="#home" class="text-gray-custom hover:text-white transition-colors">首页</a>
          <a href="#services" class="text-gray-custom hover:text-white transition-colors">服务</a>
          <a href="#projects" class="text-gray-custom hover:text-white transition-colors">项目</a>
          <a href="#testimonials" class="text-gray-custom hover:text-white transition-colors">客户评价</a>
          <a href="#contact" class="text-gray-custom hover:text-white transition-colors">联系我们</a>
          <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-full transition-all hover:shadow-lg hover:shadow-primary/20">
            开始合作
          </button>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <button id="menu-toggle" class="md:hidden text-white text-2xl">
          <i class="fa fa-bars"></i>
        </button>
      </nav>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="md:hidden bg-dark-light/95 backdrop-blur-md absolute w-full left-0 top-full py-4 px-4 hidden">
      <div class="flex flex-col space-y-4">
        <a href="#home" class="text-gray-custom hover:text-white py-2 transition-colors">首页</a>
        <a href="#services" class="text-gray-custom hover:text-white py-2 transition-colors">服务</a>
        <a href="#projects" class="text-gray-custom hover:text-white py-2 transition-colors">项目</a>
        <a href="#testimonials" class="text-gray-custom hover:text-white py-2 transition-colors">客户评价</a>
        <a href="#contact" class="text-gray-custom hover:text-white py-2 transition-colors">联系我们</a>
        <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-full transition-all">
          开始合作
        </button>
      </div>
    </div>
  </header>

  <!-- 英雄区域 -->
  <section id="home" class="min-h-screen pt-24 relative bg-grid overflow-hidden">
    <!-- 装饰元素 -->
    <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-primary/20 rounded-full filter blur-3xl"></div>
    <div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-secondary/20 rounded-full filter blur-3xl"></div>
    
    <div class="container mx-auto px-4 md:px-8 relative z-10">
      <div class="flex flex-col lg:flex-row items-center">
        <div class="lg:w-1/2 mb-12 lg:mb-0">
          <h1 class="text-[clamp(2.5rem,6vw,4.5rem)] font-extrabold leading-tight mb-6">
            打造<span class="bg-gradient-to-r from-primary to-secondary text-gradient">未来感</span>的数字体验
          </h1>
          <p class="text-gray-custom text-lg md:text-xl mb-8 max-w-lg">
            我们专注于创建令人惊叹的数字产品，融合创新设计与前沿技术，为您的品牌带来独特竞争优势。
          </p>
          <div class="flex flex-col sm:flex-row gap-4">
            <button class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full text-lg font-medium transition-all hover:shadow-lg hover:shadow-primary/20 transform hover:-translate-y-1">
              探索服务
            </button>
            <button class="bg-transparent border border-gray-600 hover:border-white text-white px-8 py-3 rounded-full text-lg font-medium transition-all transform hover:-translate-y-1">
              查看案例 <i class="fa fa-arrow-right ml-2"></i>
            </button>
          </div>
          
          <!-- 统计数据 -->
          <div class="grid grid-cols-3 gap-6 mt-16">
            <div>
              <p class="text-4xl font-bold text-white mb-2">150+</p>
              <p class="text-gray-custom">成功项目</p>
            </div>
            <div>
              <p class="text-4xl font-bold text-white mb-2">85+</p>
              <p class="text-gray-custom">满意客户</p>
            </div>
            <div>
              <p class="text-4xl font-bold text-white mb-2">12+</p>
              <p class="text-gray-custom">行业经验</p>
            </div>
          </div>
        </div>
        
        <div class="lg:w-1/2 relative">
          <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl shadow-primary/20 rotate-hover">
            <img src="https://picsum.photos/id/1/800/600" alt="创新数字体验" class="w-full h-auto">
          </div>
          <!-- 装饰元素 -->
          <div class="absolute -bottom-6 -left-6 w-32 h-32 border-4 border-secondary rounded-lg -z-10"></div>
          <div class="absolute -top-6 -right-6 w-32 h-32 border-4 border-primary rounded-lg -z-10"></div>
        </div>
      </div>
      
      <!-- 品牌标志 -->
      <div class="mt-32">
        <p class="text-center text-gray-custom mb-8">受到全球领先企业的信任</p>
        <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-60">
          <img src="https://picsum.photos/id/20/120/40" alt="品牌标志" class="h-8 grayscale hover:grayscale-0 transition-all">
          <img src="https://picsum.photos/id/21/120/40" alt="品牌标志" class="h-8 grayscale hover:grayscale-0 transition-all">
          <img src="https://picsum.photos/id/22/120/40" alt="品牌标志" class="h-8 grayscale hover:grayscale-0 transition-all">
          <img src="https://picsum.photos/id/23/120/40" alt="品牌标志" class="h-8 grayscale hover:grayscale-0 transition-all">
          <img src="https://picsum.photos/id/24/120/40" alt="品牌标志" class="h-8 grayscale hover:grayscale-0 transition-all">
        </div>
      </div>
    </div>
    
    <!-- 滚动指示器 -->
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
      <a href="#services" class="text-gray-custom hover:text-white transition-colors">
        <i class="fa fa-angle-down text-2xl"></i>
      </a>
    </div>
  </section>

  <!-- 服务区域 -->
  <section id="services" class="py-24 bg-dark-light relative">
    <div class="container mx-auto px-4 md:px-8">
      <div class="text-center max-w-3xl mx-auto mb-16">
        <p class="text-secondary font-medium mb-4">我们的专长</p>
        <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold mb-6">全方位数字解决方案</h2>
        <p class="text-gray-custom text-lg">我们提供从创意构思到技术实现的完整服务链，帮助品牌在数字世界中脱颖而出。</p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 服务卡片 1 -->
        <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all group hover:shadow-lg hover:shadow-primary/10 transform hover:-translate-y-2">
          <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-all">
            <i class="fa fa-desktop text-secondary text-2xl"></i>
          </div>
          <h3 class="text-xl font-bold mb-4">网站设计与开发</h3>
          <p class="text-gray-custom mb-6">创建响应式、高性能的网站，融合精美设计与流畅用户体验，提升品牌形象。</p>
          <a href="#" class="text-secondary font-medium inline-flex items-center group-hover:translate-x-1 transition-transform">
            了解更多 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
        
        <!-- 服务卡片 2 -->
        <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all group hover:shadow-lg hover:shadow-primary/10 transform hover:-translate-y-2">
          <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-all">
            <i class="fa fa-mobile text-secondary text-2xl"></i>
          </div>
          <h3 class="text-xl font-bold mb-4">移动应用开发</h3>
          <p class="text-gray-custom mb-6">打造直观易用的移动应用，支持跨平台运行，为用户提供随时随地的优质体验。</p>
          <a href="#" class="text-secondary font-medium inline-flex items-center group-hover:translate-x-1 transition-transform">
            了解更多 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
        
        <!-- 服务卡片 3 -->
        <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all group hover:shadow-lg hover:shadow-primary/10 transform hover:-translate-y-2">
          <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-all">
            <i class="fa fa-paint-brush text-secondary text-2xl"></i>
          </div>
          <h3 class="text-xl font-bold mb-4">UI/UX 设计</h3>
          <p class="text-gray-custom mb-6">通过用户中心设计方法，创造直观、引人入胜的界面，提升用户参与度和满意度。</p>
          <a href="#" class="text-secondary font-medium inline-flex items-center group-hover:translate-x-1 transition-transform">
            了解更多 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
        
        <!-- 服务卡片 4 -->
        <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all group hover:shadow-lg hover:shadow-primary/10 transform hover:-translate-y-2">
          <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-all">
            <i class="fa fa-line-chart text-secondary text-2xl"></i>
          </div>
          <h3 class="text-xl font-bold mb-4">数字营销</h3>
          <p class="text-gray-custom mb-6">制定数据驱动的营销策略，提高品牌知名度，吸引目标受众，增加转化率。</p>
          <a href="#" class="text-secondary font-medium inline-flex items-center group-hover:translate-x-1 transition-transform">
            了解更多 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
        
        <!-- 服务卡片 5 -->
        <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all group hover:shadow-lg hover:shadow-primary/10 transform hover:-translate-y-2">
          <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-all">
            <i class="fa fa-code text-secondary text-2xl"></i>
          </div>
          <h3 class="text-xl font-bold mb-4">定制软件开发</h3>
          <p class="text-gray-custom mb-6">开发量身定制的软件解决方案，满足特定业务需求，提高运营效率和竞争力。</p>
          <a href="#" class="text-secondary font-medium inline-flex items-center group-hover:translate-x-1 transition-transform">
            了解更多 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
        
        <!-- 服务卡片 6 -->
        <div class="bg-dark p-8 rounded-xl border border-gray-800 hover:border-primary/50 transition-all group hover:shadow-lg hover:shadow-primary/10 transform hover:-translate-y-2">
          <div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-all">
            <i class="fa fa-shield text-secondary text-2xl"></i>
          </div>
          <h3 class="text-xl font-bold mb-4"> cybersecurity</h3>
          <p class="text-gray-custom mb-6">保护您的数字资产和数据安全，实施先进的安全措施，防范潜在威胁。</p>
          <a href="#" class="text-secondary font-medium inline-flex items-center group-hover:translate-x-1 transition-transform">
            了解更多 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
      </div>
      
      <!-- 性能指标 -->
      <div class="mt-24 grid grid-cols-1 md:grid-cols-2 gap-8">
        <div class="bg-dark p-8 rounded-xl border border-gray-800">
          <h3 class="text-xl font-bold mb-6">项目成功率</h3>
          <div class="h-64">
            <canvas id="successRateChart"></canvas>
          </div>
        </div>
        
        <div class="bg-dark p-8 rounded-xl border border-gray-800">
          <h3 class="text-xl font-bold mb-6">客户满意度</h3>
          <div class="h-64">
            <canvas id="satisfactionChart"></canvas>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 项目展示 -->
  <section id="projects" class="py-24 relative bg-grid">
    <div class="container mx-auto px-4 md:px-8">
      <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-16">
        <div class="max-w-2xl mb-8 md:mb-0">
          <p class="text-secondary font-medium mb-4">精选作品</p>
          <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold mb-6">我们的成功案例</h2>
          <p class="text-gray-custom text-lg">探索我们为各行业客户打造的创新解决方案，每一个项目都体现了我们对卓越的追求。</p>
        </div>
        
        <div class="flex gap-4">
          <button class="project-filter active bg-primary text-white px-6 py-2 rounded-full transition-all">全部</button>
          <button class="project-filter bg-dark-light text-gray-custom hover:text-white px-6 py-2 rounded-full transition-all">网站</button>
          <button class="project-filter bg-dark-light text-gray-custom hover:text-white px-6 py-2 rounded-full transition-all">应用</button>
          <button class="project-filter bg-dark-light text-gray-custom hover:text-white px-6 py-2 rounded-full transition-all">设计</button>
        </div>
      </div>
      
      <!-- 项目网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 项目卡片 1 -->
        <div class="group relative overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/10/600/400" alt="项目图片" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
            <span class="text-secondary text-sm font-medium mb-2">网站设计</span>
            <h3 class="text-xl font-bold mb-2">环球旅行平台</h3>
            <p class="text-gray-custom mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">为领先旅行品牌打造的沉浸式体验网站，提升用户转化率35%。</p>
            <a href="#" class="text-white font-medium inline-flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200">
              查看详情 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
        
        <!-- 项目卡片 2 -->
        <div class="group relative overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/11/600/400" alt="项目图片" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
            <span class="text-secondary text-sm font-medium mb-2">移动应用</span>
            <h3 class="text-xl font-bold mb-2">健康追踪应用</h3>
            <p class="text-gray-custom mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">帮助用户监控健康数据的移动应用，下载量超过100万次。</p>
            <a href="#" class="text-white font-medium inline-flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200">
              查看详情 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
        
        <!-- 项目卡片 3 -->
        <div class="group relative overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/12/600/400" alt="项目图片" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
            <span class="text-secondary text-sm font-medium mb-2">品牌设计</span>
            <h3 class="text-xl font-bold mb-2">科技公司品牌重塑</h3>
            <p class="text-gray-custom mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">为新兴科技企业进行的全面品牌重塑，包括标识、UI设计系统等。</p>
            <a href="#" class="text-white font-medium inline-flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200">
              查看详情 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
        
        <!-- 项目卡片 4 -->
        <div class="group relative overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/13/600/400" alt="项目图片" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
            <span class="text-secondary text-sm font-medium mb-2">电子商务</span>
            <h3 class="text-xl font-bold mb-2">奢侈品电商平台</h3>
            <p class="text-gray-custom mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">高端奢侈品在线购物平台，融合优雅设计与流畅购物体验。</p>
            <a href="#" class="text-white font-medium inline-flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200">
              查看详情 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
        
        <!-- 项目卡片 5 -->
        <div class="group relative overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/14/600/400" alt="项目图片" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
            <span class="text-secondary text-sm font-medium mb-2">移动应用</span>
            <h3 class="text-xl font-bold mb-2">金融管理工具</h3>
            <p class="text-gray-custom mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">个人财务管理应用，提供预算规划、投资追踪等功能。</p>
            <a href="#" class="text-white font-medium inline-flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200">
              查看详情 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
        
        <!-- 项目卡片 6 -->
        <div class="group relative overflow-hidden rounded-xl">
          <img src="https://picsum.photos/id/15/600/400" alt="项目图片" class="w-full h-80 object-cover transition-transform duration-700 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
            <span class="text-secondary text-sm font-medium mb-2">网站开发</span>
            <h3 class="text-xl font-bold mb-2">教育平台改版</h3>
            <p class="text-gray-custom mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">在线教育平台全面改版，提升学习体验和课程参与度。</p>
            <a href="#" class="text-white font-medium inline-flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200">
              查看详情 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
      </div>
      
      <div class="text-center mt-16">
        <button class="bg-transparent border border-gray-600 hover:border-primary hover:text-primary text-white px-8 py-3 rounded-full text-lg font-medium transition-all">
          查看更多项目 <i class="fa fa-long-arrow-right ml-2"></i>
        </button>
      </div>
    </div>
  </section>

  <!-- 客户评价 -->
  <section id="testimonials" class="py-24 bg-dark-light">
    <div class="container mx-auto px-4 md:px-8">
      <div class="text-center max-w-3xl mx-auto mb-16">
        <p class="text-secondary font-medium mb-4">客户反馈</p>
        <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold mb-6">他们对我们的评价</h2>
        <p class="text-gray-custom text-lg">听听我们的客户怎么说，他们的成功故事是我们不断进步的动力。</p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 评价卡片 1 -->
        <div class="bg-dark p-8 rounded-xl border border-gray-800 relative">
          <div class="text-secondary text-5xl absolute -top-4 left-6 opacity-20">"</div>
          <div class="mb-6 text-yellow-400">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
          <p class="text-gray-300 mb-6 relative z-10">Nexus团队彻底改变了我们的在线形象。他们设计的网站不仅视觉上令人惊艳，而且极大地提高了我们的转化率。合作过程非常顺畅，强烈推荐！</p>
          <div class="flex items-center">
            <img src="https://picsum.photos/id/64/100/100" alt="客户头像" class="w-12 h-12 rounded-full object-cover mr-4">
            <div>
              <h4 class="font-bold">张明</h4>
              <p class="text-gray-custom text-sm">科技公司CEO</p>
            </div>
          </div>
        </div>
        
        <!-- 评价卡片 2 -->
        <div class="bg-dark p-8 rounded-xl border border-gray-800 relative">
          <div class="text-secondary text-5xl absolute -top-4 left-6 opacity-20">"</div>
          <div class="mb-6 text-yellow-400">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
          <p class="text-gray-300 mb-6 relative z-10">我们与Nexus合作开发了移动应用，结果超出了预期。他们对细节的关注和创新思维令人印象深刻。应用上线后获得了用户的一致好评。</p>
          <div class="flex items-center">
            <img src="https://picsum.photos/id/65/100/100" alt="客户头像" class="w-12 h-12 rounded-full object-cover mr-4">
            <div>
              <h4 class="font-bold">李娜</h4>
              <p class="text-gray-custom text-sm">零售品牌总监</p>
            </div>
          </div>
        </div>
        
        <!-- 评价卡片 3 -->
        <div class="bg-dark p-8 rounded-xl border border-gray-800 relative">
          <div class="text-secondary text-5xl absolute -top-4 left-6 opacity-20">"</div>
          <div class="mb-6 text-yellow-400">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star-half-o"></i>
          </div>
          <p class="text-gray-300 mb-6 relative z-10">作为一家初创公司，我们需要一个能够快速吸引用户的品牌形象。Nexus团队理解我们的愿景，并将其转化为令人惊叹的设计。他们的专业知识是无价的。</p>
          <div class="flex items-center">
            <img src="https://picsum.photos/id/66/100/100" alt="客户头像" class="w-12 h-12 rounded-full object-cover mr-4">
            <div>
              <h4 class="font-bold">王浩</h4>
              <p class="text-gray-custom text-sm">创业公司创始人</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 联系我们 -->
  <section id="contact" class="py-24 relative bg-grid">
    <div class="container mx-auto px-4 md:px-8">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
        <div>
          <p class="text-secondary font-medium mb-4">联系我们</p>
          <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold mb-6">准备好开始您的项目了吗？</h2>
          <p class="text-gray-custom text-lg mb-10">无论您有任何问题或需求，我们的团队都随时准备为您提供帮助。填写表单或通过以下方式联系我们，我们将尽快回复您。</p>
          
          <div class="space-y-6 mb-10">
            <div class="flex items-start">
              <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 mt-1">
                <i class="fa fa-map-marker text-secondary"></i>
              </div>
              <div>
                <h3 class="text-xl font-bold mb-1">地址</h3>
                <p class="text-gray-custom">北京市朝阳区建国路88号现代国际大厦A座25层</p>
              </div>
            </div>
            
            <div class="flex items-start">
              <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 mt-1">
                <i class="fa fa-phone text-secondary"></i>
              </div>
              <div>
                <h3 class="text-xl font-bold mb-1">电话</h3>
                <p class="text-gray-custom">+86 10 8888 7777</p>
              </div>
            </div>
            
            <div class="flex items-start">
              <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 mt-1">
                <i class="fa fa-envelope text-secondary"></i>
              </div>
              <div>
                <h3 class="text-xl font-bold mb-1">邮箱</h3>
                <p class="text-gray-custom">info@nexus-digital.com</p>
              </div>
            </div>
          </div>
          
          <div class="flex space-x-4">
            <a href="#" class="w-12 h-12 bg-dark-light hover:bg-primary/20 rounded-full flex items-center justify-center transition-all">
              <i class="fa fa-weixin text-gray-custom hover:text-secondary"></i>
            </a>
            <a href="#" class="w-12 h-12 bg-dark-light hover:bg-primary/20 rounded-full flex items-center justify-center transition-all">
              <i class="fa fa-weibo text-gray-custom hover:text-secondary"></i>
            </a>
            <a href="#" class="w-12 h-12 bg-dark-light hover:bg-primary/20 rounded-full flex items-center justify-center transition-all">
              <i class="fa fa-linkedin text-gray-custom hover:text-secondary"></i>
            </a>
            <a href="#" class="w-12 h-12 bg-dark-light hover:bg-primary/20 rounded-full flex items-center justify-center transition-all">
              <i class="fa fa-instagram text-gray-custom hover:text-secondary"></i>
            </a>
          </div>
        </div>
        
        <div>
          <form class="bg-dark p-8 rounded-xl border border-gray-800">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
              <div>
                <label for="name" class="block text-gray-custom mb-2">姓名</label>
                <input type="text" id="name" class="w-full bg-dark-light border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary transition-colors" placeholder="您的姓名">
              </div>
              
              <div>
                <label for="email" class="block text-gray-custom mb-2">邮箱</label>
                <input type="email" id="email" class="w-full bg-dark-light border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary transition-colors" placeholder="您的邮箱">
              </div>
            </div>
            
            <div class="mb-6">
              <label for="subject" class="block text-gray-custom mb-2">主题</label>
              <input type="text" id="subject" class="w-full bg-dark-light border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary transition-colors" placeholder="消息主题">
            </div>
            
            <div class="mb-6">
              <label for="message" class="block text-gray-custom mb-2">消息</label>
              <textarea id="message" rows="5" class="w-full bg-dark-light border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary transition-colors resize-none" placeholder="请详细描述您的需求..."></textarea>
            </div>
            
            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-primary/20">
              发送消息
            </button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="bg-dark-light py-16 border-t border-gray-800">
    <div class="container mx-auto px-4 md:px-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-16">
        <div>
          <a href="#" class="text-2xl font-bold flex items-center gap-2 mb-6">
            <span class="text-secondary">N</span>exus
          </a>
          <p class="text-gray-custom mb-6">我们致力于通过创新的数字解决方案，帮助企业实现业务增长和品牌提升。</p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-custom hover:text-secondary transition-colors">
              <i class="fa fa-weixin text-xl"></i>
            </a>
            <a href="#" class="text-gray-custom hover:text-secondary transition-colors">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-gray-custom hover:text-secondary transition-colors">
              <i class="fa fa-linkedin text-xl"></i>
            </a>
            <a href="#" class="text-gray-custom hover:text-secondary transition-colors">
              <i class="fa fa-instagram text-xl"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h3 class="text-lg font-bold mb-6">服务</h3>
          <ul class="space-y-4">
            <li><a href="#" class="text-gray-custom hover:text-white transition-colors">网站设计与开发</a></li>
            <li><a href="#" class="text-gray-custom hover:text-white transition-colors">移动应用开发</a></li>
            <li><a href="#" class="text-gray-custom hover:text-white transition-colors">UI/UX 设计</a></li>
            <li><a href="#" class="text-gray-custom hover:text-white transition-colors">数字营销</a></li>
            <li><a href="#" class="text-gray-custom hover:text-white transition-colors">定制软件开发</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-lg font-bold mb-6">公司</h3>
          <ul class="space-y-4">
            <li><a href="#" class="text-gray-custom hover:text-white transition-colors">关于我们</a></li>
            <li><a href="#" class="text-gray-custom hover:text-white transition-colors">团队</a></li>
            <li><a href="#" class="text-gray-custom hover:text-white transition-colors">案例研究</a></li>
            <li><a href="#" class="text-gray-custom hover:text-white transition-colors">博客</a></li>
            <li><a href="#" class="text-gray-custom hover:text-white transition-colors">联系我们</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-lg font-bold mb-6">订阅通讯</h3>
          <p class="text-gray-custom mb-4">订阅我们的通讯，获取最新的行业资讯和公司动态。</p>
          <form class="flex">
            <input type="email" placeholder="您的邮箱地址" class="bg-dark border border-gray-700 rounded-l-lg px-4 py-2 text-white focus:outline-none focus:border-primary transition-colors flex-grow">
            <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors">
              <i class="fa fa-paper-plane"></i>
            </button>
          </form>
        </div>
      </div>
      
      <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
        <p class="text-gray-custom mb-4 md:mb-0">© 2023 Nexus Digital. 保留所有权利。</p>
        <div class="flex space-x-6">
          <a href="#" class="text-gray-custom hover:text-white transition-colors">隐私政策</a>
          <a href="#" class="text-gray-custom hover:text-white transition-colors">服务条款</a>
          <a href="#" class="text-gray-custom hover:text-white transition-colors">Cookie政策</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('bg-dark/90', 'backdrop-blur-md', 'shadow-lg', 'py-2');
        navbar.classList.remove('py-4');
      } else {
        navbar.classList.remove('bg-dark/90', 'backdrop-blur-md', 'shadow-lg', 'py-2');
        navbar.classList.add('py-4');
      }
    });
    
    // 移动端菜单
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    
    menuToggle.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      if (mobileMenu.classList.contains('hidden')) {
        menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
      } else {
        menuToggle.innerHTML = '<i class="fa fa-times"></i>';
      }
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        // 关闭移动菜单（如果打开）
        if (!mobileMenu.classList.contains('hidden')) {
          mobileMenu.classList.add('hidden');
          menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
        }
        
        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
    
    // 项目筛选按钮
    const filterButtons = document.querySelectorAll('.project-filter');
    filterButtons.forEach(button => {
      button.addEventListener('click', () => {
        // 移除所有按钮的active类
        filterButtons.forEach(btn => {
          btn.classList.remove('active', 'bg-primary', 'text-white');
          btn.classList.add('bg-dark-light', 'text-gray-custom');
        });
        
        // 为当前点击的按钮添加active类
        button.classList.add('active', 'bg-primary', 'text-white');
        button.classList.remove('bg-dark-light', 'text-gray-custom');
        
        // 这里可以添加实际筛选逻辑
      });
    });
    
    // 初始化图表
    window.addEventListener('load', () => {
      // 项目成功率图表
      const successRateCtx = document.getElementById('successRateChart').getContext('2d');
      new Chart(successRateCtx, {
        type: 'line',
        data: {
          labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
          datasets: [{
            label: '项目成功率 (%)',
            data: [85, 88, 92, 94, 96, 98],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            tension: 0.4,
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              max: 100,
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              ticks: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            },
            x: {
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              ticks: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            }
          },
          plugins: {
            legend: {
              labels: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            }
          }
        }
      });
      
      // 客户满意度图表
      const satisfactionCtx = document.getElementById('satisfactionChart').getContext('2d');
      new Chart(satisfactionCtx, {
        type: 'bar',
        data: {
          labels: ['产品质量', '服务态度', '响应速度', '技术能力', '性价比'],
          datasets: [{
            label: '客户满意度 (%)',
            data: [95, 97, 94, 96, 93],
            backgroundColor: '#00F0FF',
            borderRadius: 6
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              max: 100,
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              ticks: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            },
            x: {
              grid: {
                color: 'rgba(255, 255, 255, 0.1)'
              },
              ticks: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            }
          },
          plugins: {
            legend: {
              labels: {
                color: 'rgba(255, 255, 255, 0.7)'
              }
            }
          }
        }
      });
    });
  </script>
</body>
</html>